<!-- 资产装置列表信息 -->
<template>
  <div class="q-pa-md bg-white person-container">
    <div style="width: 100%; height: 60px;">
      <q-btn class="q-mr-sm q-mt-xs borderRadius float-right" unelevated padding="8px 8px 7px" icon="add_circle_outline" color="primary" @click="handleCreate" label="添加" />
    </div>
    <q-markup-table flat class="relative-position">
      <thead>
        <th v-for="column in columns" :key="column.name" :class="column.align">
          {{ column.label }}
          <q-icon v-if="column.isSort" class="cursor-pointer" size="18px" :name="descending?'expand_less':'expand_more'" @click="handlerSort" />
        </th>
        <th class="text-center">操作</th>
      </thead>
      <tbody>
        <div v-if="loading">
          <q-inner-loading showing color="grey" />
        </div>
        <tr v-for="row in dataList" :key="row.id">
          <td v-for="column in columns" :key="column.name" :class="column.align">
            {{ row[column.name] }}
          </td>
          <td class="text-center">
            <q-btn
              size="md"
              unelevated
              class="q-mr-xs"
              padding="0 10px"
              :outline="themeColor.primary === '#00CBED'"
              :class="themeColor.primary === '#00CBED'?'meijia-delete-style':'delete-style'"
              @click="handleDelete(row)"
              dense
            >
              取消关注
            </q-btn>
          </td>
        </tr>
      </tbody>
    </q-markup-table>
  </div>

  <!-- 添加/编辑 弹出对话框 -->
  <q-dialog v-model="isAddOrUpdate" persistent>
    <q-card class="card-style">
        <!-- 对话框的头部 -->
      <q-card-section class="row items-center q-pb-none">
        <div class="text-h6">添加关注人员</div>
        <q-space />
        <q-btn icon="close" flat round dense @click="closeEbitUpdate"></q-btn>
      </q-card-section>
        <!-- 对话框的主体-->
      <q-card-section>
        <q-form ref="assetForm" class="q-pa-sm dialog-form-container">
          <ul>
            <li>
              <span>
                <span style="color: red">*</span>
                关注人员
              </span>
              <span>
                <q-select
                  v-model="creatUpdateQuery.concerns_name"
                  dense
                  outlined
                  use-input
                  options-dense
                  :options="selectArr"
                  :rules="[val => val || '请选择人员']"
                  @filter="filterFn"
                />
              </span>
            </li>
          </ul>
        </q-form>
      </q-card-section>
        <!-- 对话框的底部 -->
      <q-card-actions align="right">
        <q-btn unelevated label="取消" type="reset" style="color: #686868;" outline @click="closeEbitUpdate" />
        <q-btn unelevated label="确定" type="submit" color="accent" @click="setPersonId.num === 0?handlerCreateSensor():handlerCreateSiteSensor()" />
      </q-card-actions>
    </q-card>
  </q-dialog>
  <!-- 删除 提示框 -->
  <DeleteDialog :isShowDelete="isShowDelete" :tipInfo="'确定取消关注吗？'" @closeDeleteDialog="closeDeleteDialog" @confirmDelete="setPersonId.num === 0?confirmDelete():confirmSiteDelete()" />
</template>

<script>
import { ref } from 'vue'
import DeleteDialog from 'src/components/deleteDialog/index'
import { fetchConPerson, setIsConcerns, fetchSiteConPerson, setSiteConcerns } from 'src/api/systemtWarning'
import { mapGetters } from 'vuex';

export default {
  props: {
    personList: {
      type: Array,
      default() {
        return []
      }
    },
    setPersonId: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  data () {
    return {
      dataList: [],
      filter: ref(''),

      columns: [
        { name: 'idIndex', required: true, label: 'ID', align: 'text-center',field: 'idIndex', isSort: true},
        { name: 'concerns_name', required: true, label: '姓名', align: 'text-center',field: 'concerns_name'},
        { name: 'modify_time', align: 'text-center', label: '关注时间', field: 'modify_time'},
      ],
      queryList: {
        ordering: 'id'
      },
      loading: false,
      isShowDelete: false,
      isAddOrUpdate: false,
      creatUpdateQuery: {
        concerns_name: ''
      },
      selectArr: [],
      descending: false
    }
  },

  components: {
    DeleteDialog
  },

  computed: {
    ...mapGetters(['themeColor'])
  },
  watch: {
    setPersonId: {
      immediate: true,
      deep: true,
      handler(val) {
        if (!val || val.setId === 0) return
        if (val.num === 0) {
          this.resetQuery()
          this.feathOranizerList()
        } else {
          this.resetQuery()
          this.feathSiteList()
        }
      }
    },
    personList: {
      deep: true,
      immediate: true,
      handler(val) {
        this.selectArr = val
      }
    }
  },
  beforeCreate() {
  },
  mounted() {
  },

  methods: {
    // 刷新
    handlerRefresh() {
      this.feathOranizerList()
    },
    // 重置参数
    resetQuery() {
      this.queryList = {
        ordering: 'id'
      }
    },
    /**
     * 获取资产信息的列表
     */
    feathOranizerList() {
      this.loading = true
      this.queryList.ordering = 'id'
      this.queryList.equip_id = this.setPersonId.setId
      fetchConPerson(this.queryList).then(res => {
        const {status, data, totalCounts} = res
        if (status === 200) {
          this.dataList = data
          if (this.dataList && this.dataList.length > 0) {
            this.dataList.forEach((element, index) => {
              if (this.queryList.ordering === 'id') {
                element.idIndex = index + 1
              } else {
                element.idIndex = this.dataList.length - index
              }
              if (element.modify_time) element.modify_time = element.modify_time.substr(0, 10) + ' ' + element.modify_time.substr(11, 8)
            })
          }
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    /**
     * 关注人员信息的列表-监测点位
     */
    feathSiteList() {
      this.loading = true
      this.queryList.ordering = 'id'
      this.queryList.point_id = this.setPersonId.setId
      fetchSiteConPerson(this.queryList).then(res => {
        const {status, data, totalCounts} = res
        if (status === 200) {
          this.dataList = data
          if (this.dataList && this.dataList.length > 0) {
            this.dataList.forEach((element, index) => {
              if (this.queryList.ordering === 'id') {
                element.idIndex = index + 1
              } else {
                element.idIndex = this.dataList.length - index
              }
              if (element.modify_time) element.modify_time = element.modify_time.substr(0, 10) + ' ' + element.modify_time.substr(11, 8)
            })
          }
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    },
    /**
     * 打开添加的对话框
     */
    handleCreate() {
      this.creatUpdateQuery.concerns_name = ''
      this.isAddOrUpdate = true
      this.$nextTick(res => {
        this.$refs.assetForm.resetValidation()
      })
    },
    // 资产列表添加关注人员
    handlerCreateSensor() {
      this.$refs.assetForm.validate().then(success => {
        if (success) {
          let queryTemp = {}
          queryTemp.equip_id = this.setPersonId.setId
          queryTemp.is_concerns = true
          queryTemp.concerns_uid = this.creatUpdateQuery.concerns_name.uid

          setIsConcerns(queryTemp).then(res => {
            this.isAddOrUpdate = false
            if (res.status === 200) {
              this.resetQuery()
              this.feathOranizerList()
              this.$q.notify({
                type: 'positive',
                position: 'top',
                message: '添加成功！'
              })
            }
          })
        }
      })
    },
    // 监测点位列表添加关注人员
    handlerCreateSiteSensor() {
      this.$refs.assetForm.validate().then(success => {
        if (success) {
          let queryTemp = {}
          queryTemp.point_id = this.setPersonId.setId
          queryTemp.is_concerns = true
          queryTemp.concerns_uid = this.creatUpdateQuery.concerns_name.uid

          setSiteConcerns(queryTemp).then(res => {
            this.isAddOrUpdate = false
            if (res.status === 200) {
              this.resetQuery()
              this.feathSiteList()
              this.$q.notify({
                type: 'positive',
                position: 'top',
                message: '添加成功！'
              })
            }
          })
        }
      })
    },
    /**
     * 关闭 添加/编辑 弹出对话框
     */
    closeEbitUpdate() {
      this.isAddOrUpdate = false
    },
    /**
     * 取消关注
     */
    handleDelete(val) {
      this.isShowDelete = true
      if (val) {
        this.cancalQuery = {
          concerns_uid: val.concerns_uid
        }
      }
    },
    /**
     * 资产 - 确定取消关注
     */
    confirmDelete() {
      let queryTemp = {}
      queryTemp.equip_id = this.setPersonId.setId
      queryTemp.is_concerns = false
      queryTemp.concerns_uid = this.cancalQuery.concerns_uid

      setIsConcerns(queryTemp).then(res => {
        const {status, msg} = res
        if (status === 200) {
          this.isShowDelete = false
          this.resetQuery()
          this.feathOranizerList()
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: `已取消关注！`
          })
        } else {
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: msg
          })
        }
      })
    },
    /**
     * 监测点位 - 确定取消关注
     */
    confirmSiteDelete() {
      let queryTemp = {}
      queryTemp.point_id = this.setPersonId.setId
      queryTemp.is_concerns = false
      queryTemp.concerns_uid = this.cancalQuery.concerns_uid

      setSiteConcerns(queryTemp).then(res => {
        const {status, msg} = res
        if (status === 200) {
          this.isShowDelete = false
          this.resetQuery()
          this.feathSiteList()
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: `已取消关注！`
          })
        } else {
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: msg
          })
        }
      })
    },
    /**
     * 关闭删除提示框
     */
    closeDeleteDialog() {
      this.isShowDelete = false
    },

     /**
     * 选择框过滤
     */
    filterFn(val, update) {
      if (val === '') {
        update(() => {
          this.selectArr = this.personList
        })
        return
      }
      update(() => {
        const needle = val.toLowerCase()
        this.selectArr = this.personList.filter(v => {
          return (v.value+'').toLowerCase().indexOf(needle) > -1
        })
      })
    },
    /**
     * 排序
     */
    handlerSort() {
      this.descending = !this.descending
      this.dataList.reverse()
    }
  }
}

</script>
<style lang='scss' scoped>
// 固定操作列
.my-sticky-column-table {
  tr:first-child {
    th:last-child {
      background: #fff;
    }
  }
  td {
    &:last-child {
      background: #fff;
    }
  }
  th:last-child, td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
  }
}
// 弹出的对话框样式
.dialog-form-container {
  ul {
    li {
      height: 42px;
      line-height: 42px;
      white-space: nowrap;
      margin-bottom: 30px;
      >span {
        &:first-child {
          display: inline-block;
          width: 150px;
          margin-right: 5px;
        }
        &:last-child {
          display: inline-block;
          width: 200px;
          >.q-input {
            width: 200px;
          }
        }
      }
    }
  }
}

.person-container {
  height: 410px;
}
</style>
